<template>
  <div
    style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 50px; display: flex;height: 55px;width: 100%;"
  >
    <div style="flex: 1; font-size: 20px">
      <span
        :class="collapseBtnClass"
        style="cursor: pointer;float: left;margin-top: 18px; font-size: 23px;"
        @click="collapse"
      ></span>
      <!-- 页签 -->
      <el-breadcrumb
        separator="/"
        style="margin-left: 40px; margin-top: 20px;font-size: medium;"
      >
        <!-- <el-breadcrumb-item :to="{ path: '/home' }">主页</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/home">活动管理</a></el-breadcrumb-item> -->
        <el-breadcrumb-item
          v-for="(item, index) in breadList"
          :key="index"
          :to="{ path: item.path }"
          v-show="item.meta.title !== ''"
        >
          <!-- 当为空时不显示 -->
          {{ item.meta.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 个人信息 -->
    <el-dropdown
      style="width: 170px; cursor: pointer;font-size: 15px;text-align: right ;"
    >
      <!-- 头像 -->
      <div style="display: inline-block">
        <!-- <img :src="user.avatarUrl" alt=""
                style="width: 30px; border-radius: 50%; position: relative; top: 10px; right: 5px"> -->
        <el-avatar
          style="margin-top: 10px;margin-right: 10px;"
          icon="el-icon-user-solid"
          :src="user.avatarURL"
        >
        </el-avatar>
        <span style="position: relative; top: -15px;">{{ user.nickName }}</span>
        <i
          class="el-icon-arrow-down"
          style="position: relative; top: -15px;"
        ></i>
      </div>

      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
          <span style="text-align: none;" @click="$router.push('/person')"
            >个人信息</span
          >
        </el-dropdown-item>
        <el-dropdown-item>
          <span style="text-align: none;" @click="logout">退出</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { resetRouter } from "../router";
export default {
  name: "MyHeader",
  props: {
    user: Object
  },
  data() {
    return {
      collapseBtnClass: "el-icon-s-fold",
      breadList: [], // 路由集合
      show: false
      // user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {},
    };
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  },
  methods: {
    collapse() {
      // 点击收缩按钮触发
      if (this.$store.state.isCollapse) {
        // 收缩
        this.collapseBtnClass = "el-icon-s-unfold";
      } else {
        // 展开
        this.collapseBtnClass = "el-icon-s-fold";
      }
      this.$store.dispatch("changeCollapseAndSideWidth");
    },
    // isHome(route) {
    //     console.log(route.name);
    //     return route.name === "home";
    // },
    getBreadcrumb() {
      let matched = this.$route.matched;
      matched = [{ path: "/home", meta: { title: "主页" } }].concat(matched);
      this.breadList = matched;
    },
    logout() {
      this.$router.push("/login");
      localStorage.removeItem("user");
      localStorage.removeItem("token");
      resetRouter();
      this.$message.success("退出成功");
    }
  },
  created() {
    this.getBreadcrumb();
  }
};
</script>

<style></style>
